<template lang="html">
	<div>
		<div class="wrap">
			<!--自动定位城市-->
		<div class="city">
			<img src="../../static/img/local.png" style="width: 5%;height: .35rem;margin-top: .3rem;margin-left: 1%;">&nbsp;{{ localCity }}<input type="text" placeholder="搜索" class="sosuo"><img src="../../static/img/so.png">
		</div>
		<!--轮播图-->
      	<Lunbo></Lunbo>
      	<!--返回顶部-->
      	<backTop　:scrollmyself = 'true'></backTop>
      	<!--导航部分 -->
      	<div class="first">
      		<dl>
      			<dt v-for="item in result"><a :href="item.url"><img :src="item.img" /></a></dt>
      			<dd v-for="item in result"><a href="item.url">{{ item.title }}</a></dd>
      		</dl>
      	</div>
      	<!--首页主体内容展示-->
      	<div class="mains">
      		<p class="main_top" v-for="item in lists.floors" v-if="item.index==4">
      			<a :href="item.content.url">
      				<img :src="item.content.img">
      			</a>
      		</p>
      		<p class="main_top" v-for="item in lists.floors" v-if="item.index==5">
      			<a :href="item.content.url">
      				<img :src="item.content.img">
      			</a>
      		</p>
      		<p class="main_center" v-for="item in lists.floors" v-if="item.index==6">{{ item.content.title }}</p>
      		<P class="main_list" v-for="item in lists.floors" v-if="item.type==15 && item.index != 5 && item.index != 4">
      			<a @click="goNext()">
      				<img :src="item.content.img">
      			</a>
      		</p>
      	</div>
      </div>
	</div>
</template>

<script>
import Lunbo from '../components/lunbo'
import Pageone from '../components/pageone'
import backTop from '../components/backtop'
import bus from '../route/bus'
export default {
	data(){
		return{
			result:{},
			lists:{},
			localCity:""
		}
	},
	created(){
		this.axios.get('../static/data/first.json').then(data => {
			// console.log(data);
			this.result = data.data.floors[1].list;
			// console.log(this.result)
			this.lists = data.data;
		});
		//高德地图接口“http://restapi.amap.com/v3/ip?key=”，key值是自己在线申请的key值，直接返回当前ip所在的城市
		this.axios.get('http://restapi.amap.com/v3/ip?key=148a6ac1aab164f21da77728fc893368').then(obj =>{
			console.log(obj)
			this.city = obj.data.city;
			//正则匹配全局，字符串切割去掉后面的省或市
			let cityRex = /['省'|'市']$/
			if(cityRex.test(this.city)){
				let inde =this.city.match(cityRex).index;
				let newCity =this.city.substr(alert,inde)
				this.localCity = newCity;
			}
//			console.log(this.localCity)
		})
	},
	methods:{
		goNext:function(){
			this.$router.push({path:"/components/pageone" })
		}
	},
	components:{
		Lunbo,
		Pageone,
		backTop
	}
}
</script>

<style lang="css">
	*{
		margin:0;
		padding:0;
	}
	.city{
		width: 100%;
		height: 1rem;
		background: white;
	}
	.city>input{
		margin-top:.2rem;
		width: 73%;
		height: .6rem;
		margin-left:1.5%;
	}
	.city>img{
		margin-top:.2rem;
		vertical-align: top;
	}
	.first{
		background: white;
		width: 100%;
	}
	.first dl{
		display: inline-block;
		text-align: center;
		width: 100%;
		margin-top:.2rem;
		margin-bottom: .2rem;
	}
	.first dl a{
		color:gray;
	}
	.first dl img{
		display: inline-block;
		width: 70%;
	}
	.first dt{
		display: inline-block;
		width: 20%;
	}
	.first dd{
		display: inline-block;
		width: 20%;
		font-size: .17rem;
	}
	.main{
		background: white;
		width: 100%;
	}

	.mains>.main_top>a>img{
		width: 100%;
		height: 2.5rem;
	}
	.mains>.main_center{
		text-align: center;
		padding:.2rem 0;
		font-size: .25rem;
		color: black;
	}
	.mains>.main_list>a>img{
		width: 100%;
		height: 2.5rem;
	}
	.class{
		width: 100%;
		height: 1rem;
	}
</style>
